<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <script src="js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="js/index.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/icon.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet"  href="css/test.css">
    <link rel="stylesheet"  href="css/mystyle.css">
</head>
<body>
<div class="container" id="app">

    <div class="head">
            <el-image
                    style="margin: 0 auto;align-items: center;display: flex;width: 70%;height: 100%;position: relative;left: 5%"
                    :src="logo"
                    :fit="fits"></el-image>
    </div>

    <div class="main">
        <div class="input_menu">
            <ui style="align-items: center;justify-content: center;left: 45%;display: flex">
                <li style="display: inline-block">
                    <el-select v-model="id" placeholder="选择搜索类型" style="width: 140px">
                        <el-option label="挥发油" value="1"></el-option>
                        <el-option label="中药" value="2"></el-option>
                        <el-option label="组分" value="3"></el-option>
                        <el-option label="被促透药物" value="4"></el-option>
                        <el-option label="药理作用" value="5"></el-option>
                    </el-select>
                </li>
                <li style="display: inline-block">
                    <el-input v-model="word" style="width: 400px;" ></el-input>
                </li>

                <li style="display: inline-block">
                    <el-button type="primary" @click="findAll" >查询</el-button>
                </li>



            </ui>
        </div>

        <div class="search">



            <!--            挥发油                                                 -->


                <el-table
                        :data="tableData1.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        stripe
                        v-show="show1"
                        :header-cell-style="{ textAlign: 'center' }"
                        :cell-style="{ textAlign: 'center' }"
                        style="display: flex;left: -200px">

                    <el-table-column type="expand" >
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand" >
                                <el-form-item >
                                    <p2><b>基本信息</b></p2>
                                </el-form-item>
                                <br>
                                <el-form-item label="挥发油中文名">
                                    <span>{{ props.row.oilChineseName }}</span>
                                </el-form-item>
                                <el-form-item label="挥发油英文名">
                                    <span>{{ props.row.oilEnglishName }}</span>
                                </el-form-item>
                                <el-form-item label="类别（单体/提取物）">
                                    <span>{{ props.row.type }}</span>
                                </el-form-item>
                                <el-form-item label="来源中药">
                                    <span>{{ props.row.origin }}</span>
                                </el-form-item>
                                <el-form-item label="药理作用">
                                    <span style=" display: inline-block; width: 310px;word-break: break-all; white-space: normal;">{{ props.row.efficacy }}</span>
                                </el-form-item>
                                <el-form-item label="药理作用（参考文献）">
                                    <span >{{ props.row.edoc }}</span>
                                </el-form-item>
                                <br>
                                <el-form-item >
                                    <p2><b>物理性质</b></p2>
                                </el-form-item>
                                <br>
                                <el-form-item label="相对密度">
                                    <span>{{ props.row.relativeDensity }}</span>
                                </el-form-item>
                                <el-form-item label="比旋度">
                                    <span>{{ props.row.specificRotation }}</span>
                                </el-form-item>
                                <el-form-item label="折光率">
                                    <span>{{ props.row.refractiveIndex }}</span>
                                </el-form-item>
                                <el-form-item label="沸点">
                                    <span>{{ props.row.boiling }}</span>
                                </el-form-item>
                                <el-form-item label="挥发性参数">
                                    <span>{{ props.row.volatile }}</span>
                                </el-form-item>
                                <el-form-item label="参考文献">
                                    <span>{{ props.row.pdocument }}</span>
                                </el-form-item>
                                <el-form-item >
                                    <p2><b>毒性</b></p2>
                                </el-form-item>
                                <br>
                                <el-form-item label="毒性">
                                    <span>{{ props.row.toxic }}</span>
                                </el-form-item>
                                <el-form-item label="参考文献">
                                    <span>{{ props.row.tdocument }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="oilChineseName"
                            label="挥发油中文名"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="oilEnglishName"
                            label="挥发油英文名"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="类别"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="origin"
                            width="180"
                            label="中药来源">
                    </el-table-column>
                    <el-table-column
                            prop="efficacy"
                            width="180"
                            label="药理作用">
                    </el-table-column>
                    <el-table-column
                            label="详细信息"
                            width="290">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="viewInfo(scope.row.oilChineseName)">化学组成信息</el-button>
                            <el-button type="success" @click="viewInfo1(scope.row.oilChineseName)">促透应用信息</el-button>
                            <!--                            <el-button type="info" @click="viewInfo2(scope.row)">来源中药信息</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" align="center" style="position:relative;top: -100px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            layout="prev, pager, next"
                            :total="totals"
                            v-show="show2"
                            :page-size="pageSize">
                    </el-pagination>
                </div>

            <el-dialog title="组分信息" :visible.sync="dialogTableVisible">
                <el-table
                        :data="ticketInfoform"
                        style="width: 100%">
                    <el-table-column
                            prop="composition"
                            label="组成信息"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            prop="extractionMethod"
                            label="提取方法/挥发油含量 ％ (mL∙g-1)/（粒度; 加水量; 浸泡时间; 提取时间）/产地"
                            width="430">
                    </el-table-column>
                    <el-table-column
                            prop="document"
                            label="文献"
                            width="400">
                    </el-table-column>
                </el-table>
                <!--            <span>组分信息</span>-->
                <!--            <el-tag size="small">{{ticketInfoform.composition}}</el-tag>-->
                <!--            <br>-->
                <!--            <span>提取方法</span>-->
                <!--            <el-tag size="small" >{{ticketInfoform.extractionMethod}}</el-tag>-->
                <!--            <br>-->
                <!--            <span>参考文献</span>-->
                <!--            <el-tag size="small" >{{ticketInfoform.cdocument}}</el-tag>-->

            </el-dialog>

            <el-dialog title="应用信息" :visible.sync="dialogTableVisible1">
                <el-table
                        :data="ticketInfoform1"
                        style="width: 1050px">
                    <el-table-column
                            label="名称"
                            width="120">
                        <template slot-scope="scope">
                            <el-button @click="findOilApplication(scope.row.drugChineseName)">{{scope.row.drugChineseName}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="massFraction"
                            label="挥发油质量分数/增渗倍数（扩散池/渗透屏障/接受液/供试品）"
                            width="330">
                    </el-table-column>
                    <el-table-column
                            prop="document"
                            label="文献"
                            width="330">
                    </el-table-column>
                </el-table>
                <!--            <span>药物名称</span>-->
                <!--            <el-tag size="small">{{ticketInfoform1.drugPromotedCName}}</el-tag>-->
                <!--            <br>-->
                <!--            <span>英文名</span>-->
                <!--            <el-tag size="small" >{{ticketInfoform1.drugPromotedEName}}</el-tag>-->
                <!--            <br>-->
                <!--            <span>应用详细</span>-->
                <!--            <el-tag size="small" >{{ticketInfoform1.massFraction}}</el-tag>-->
                <!--            <br>-->
                <!--            <span>参考文献</span>-->
                <!--            <el-tag size="small" >{{ticketInfoform1.adocument}}</el-tag>-->
            </el-dialog>


            <!--     组分                     -->
            <template>

                <el-table
                        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        stripe
                        v-show="show5"
                        style="width: 90%;font-size: 16px;left: 17%;top:-150px">

                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand" >
                                <!--                            <el-form-item label="结构式">-->
                                <!--                                <el-image-->
                                <!--                                        style="width: 100px; height: 100px"-->
                                <!--                                        :src="getImgUrl(props.row.id)"-->
                                <!--                                        :fit="fit"></el-image>-->
                                <!--                            </el-form-item>-->
                                <el-form-item label="中文名">
                                    <span>{{ props.row.chineseName }}</span>
                                </el-form-item>
                                <el-form-item label="英文名">
                                    <span>{{ props.row.englishName }}</span>
                                </el-form-item>
                                <el-form-item label="异名">
                                    <span>{{ props.row.diffName }}</span>
                                </el-form-item>
                                <el-form-item label="PubChem CID">
                                    <span>{{ props.row.pubChemCID }}</span>
                                </el-form-item>
                                <el-form-item label="分子式">
                                    <span>{{ props.row.formula }}</span>
                                </el-form-item>
                                <el-form-item label="分子量">
                                    <span>{{ props.row.weight }}</span>
                                </el-form-item>
                                <el-form-item label="Canonical SMILES">
                                    <span style=" display: inline-block; width: 310px;word-break: break-all; white-space: normal;">{{ props.row.canonicalSMLES }}</span>
                                </el-form-item>
                                <el-form-item label="Isomeric SMILES">
                                    <span>{{ props.row.isomericSMILES }}</span>
                                </el-form-item>

                                <el-form-item label="结构类别">
                                    <span>{{ props.row.classify }}</span>
                                </el-form-item>
                                <el-form-item label="摩尔体积 MVol">
                                    <span>{{ props.row.mvol }}</span>
                                </el-form-item>
                                <el-form-item label="熔点（℃）">
                                    <span>{{ props.row.meltingPoint }}</span>
                                </el-form-item>
                                <el-form-item label="XLogP3">
                                    <span>{{ props.row.xlogP3 }}</span>
                                </el-form-item>
                                <el-form-item label="溶解度参数(CED1/2)" >
                                    <span>{{ props.row.solubilityParameter }}</span>
                                </el-form-item>
                                <el-form-item label="汉森溶解度参数(δP)" >
                                    <span>{{ props.row.hansenSolubilityParameterP }}</span>
                                </el-form-item>
                                <el-form-item label="汉森溶解度参数(δH)" >
                                    <span>{{ props.row.hansenSolubilityParameterH }}</span>
                                </el-form-item>
                                <el-form-item label="汉森溶解度参数(δD)" >
                                    <span>{{ props.row.hansenSolubilityParameterD }}</span>
                                </el-form-item>
                                <el-form-item label="氢键供体数目" >
                                    <span>{{ props.row.hydrogenBondDonorCount }}</span>
                                </el-form-item>
                                <el-form-item label="氢键受体数目" >
                                    <span>{{ props.row.hydrogenBondAcceptorCount }}</span>
                                </el-form-item>

                                <el-form-item label="拓扑极性表面积(Å²)" >
                                    <span>{{ props.row.topologicalPolarSurfaceArea }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="结构式"
                            width="190">
                        <template slot-scope="scope">
                            <el-image
                                    style="width: 170px; height: 170px"
                                    :src="getImgUrl(scope.row.id)"
                                    @click="bigImg(getImgUrl(scope.row.id))"
                                    :preview-src-list="srcList"
                                    :fit="fit"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="chineseName"
                            label="中文名"
                            width="160">
                    </el-table-column>
                    <el-table-column
                            prop="englishName"
                            label="英文名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="diffName"
                            label="别名"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="formula"
                            width="100"
                            label="分子式">
                    </el-table-column>
                    <el-table-column
                            prop="canonicalSMLES"
                            label="Canonical SMILES">
                    </el-table-column>
                    </el-table-column>
                </el-table>
                <div class="block" align="center" style="position:relative;top: -100px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            layout="prev, pager, next"
                            :total="totals"
                            v-show="show6"
                            :page-size="pageSize">
                    </el-pagination>
                </div>
            </template>


            <!--        中药-->
            <template>

                <el-table
                        :data="tableData1.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        stripe
                        v-show="show3"
                        style="display: flex">

                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="中药中文名">
                                    <span>{{ props.row.drugChineseName }}</span>
                                </el-form-item>
                                <el-form-item label="中药英文名">
                                    <span>{{ props.row.drugEnglishName }}</span>
                                </el-form-item>
                                <el-form-item label="拉丁名">
                                    <span>{{ props.row.latinName }}</span>
                                </el-form-item>
                                <el-form-item label="异名">
                                    <span>{{ props.row.diffName }}</span>
                                </el-form-item>
                                <el-form-item label="科属">
                                    <span>{{ props.row.part }}</span>
                                </el-form-item>
                                <el-form-item label="药效分类">
                                    <span>{{ props.row.classify }}</span>
                                </el-form-item>
                                <el-form-item label="性味">
                                    <span>{{ props.row.taste }}</span>
                                </el-form-item>
                                <el-form-item label="归经">
                                    <span>{{ props.row.category }}</span>
                                </el-form-item>
                                <el-form-item label="功效">
                                    <span>{{ props.row.efficacy }}</span>
                                </el-form-item>
                                <el-form-item label="主治">
                                    <span>{{ props.row.attending }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="drugChineseName"
                            label="中药中文名"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="drugEnglishName"
                            width="190"
                            label="中药英文名">
                    </el-table-column>
                    <el-table-column
                            prop="efficacy"
                            width="250"
                            label="功效">
                    </el-table-column>
                    <el-table-column
                            prop="attending"
                            width="350"
                            label="主治">
                    </el-table-column>
                    <el-table-column
                            label="详细信息"
                            width="290">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="viewInfo2(scope.row.drugChineseName)">挥发油信息</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" align="center" style="position:relative;top: -100px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            layout="prev, pager, next"
                            :total="totals"
                            v-show="show4"
                            :page-size="pageSize">
                    </el-pagination>
                </div>

                <el-dialog title="挥发油信息" :visible.sync="dialogTableVisible2">
                    <el-button v-for="item in oilName" @click="findOil(item)">{{item}}</el-button>
                </el-dialog>
            </template>


            <!--        被促透药物             -->
            <template>

                <el-table
                        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        stripe
                        v-show="show7"
                        style="width: 90%;font-size: 16px;left: 17%;top:-150px">

                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <!--                            <el-form-item label="结构式">-->
                                <!--                                <el-image-->
                                <!--                                        style="width: 100px; height: 100px"-->
                                <!--                                        :src="getImgUrl(props.row.id)"-->
                                <!--                                        :fit="fit"></el-image>-->
                                <!--                            </el-form-item>-->
                                <el-form-item label="中文名">
                                    <span>{{ props.row.chineseName }}</span>
                                </el-form-item>
                                <el-form-item label="英文名">
                                    <span>{{ props.row.englishName }}</span>
                                </el-form-item>
                                <el-form-item label="异名">
                                    <span>{{ props.row.diffName }}</span>
                                </el-form-item>
                                <el-form-item label="PubChem CID">
                                    <span>{{ props.row.pubChemCID }}</span>
                                </el-form-item>
                                <el-form-item label="分子式">
                                    <span>{{ props.row.formula }}</span>
                                </el-form-item>
                                <el-form-item label="分子量">
                                    <span>{{ props.row.weight }}</span>
                                </el-form-item>
                                <el-form-item label="Canonical SMILES"  >
                                    <span style=" display: inline-block; width: 310px;word-break: break-all; white-space: normal;">{{ props.row.canonicalSMILES }}</span>
                                </el-form-item>
                                <el-form-item label="Isomeric SMILES">
                                    <span>{{ props.row.isomericSMILES }}</span>
                                </el-form-item>

                                <el-form-item label="结构类别">
                                    <span>{{ props.row.type }}</span>
                                </el-form-item>
                                <el-form-item label="摩尔体积 MVol">
                                    <span>{{ props.row.mvol }}</span>
                                </el-form-item>
                                <el-form-item label="熔点（℃）">
                                    <span>{{ props.row.meltingPoint }}</span>
                                </el-form-item>
                                <el-form-item label="XLogP3">
                                    <span>{{ props.row.XLogP3 }}</span>
                                </el-form-item>
                                <el-form-item label="溶解度参数(CED1/2)">
                                    <span>{{ props.row.solubilityParameter }}</span>
                                </el-form-item>
                                <el-form-item label="汉森溶解度参数(δP)">
                                    <span>{{ props.row.hansenSolubilityParameterP }}</span>
                                </el-form-item>
                                <el-form-item label="汉森溶解度参数(δH)">
                                    <span>{{ props.row.hansenSolubilityParameterH }}</span>
                                </el-form-item>
                                <el-form-item label="汉森溶解度参数(δD)">
                                    <span>{{ props.row.hansenSolubilityParameterD }}</span>
                                </el-form-item>
                                <el-form-item label="氢键供体数目">
                                    <span>{{ props.row.hydrogenBondDonorCount }}</span>
                                </el-form-item>
                                <el-form-item label=" 氢键受体数目">
                                    <span>{{ props.row.hydrogenBondAcceptorCount }}</span>
                                </el-form-item>
                                <el-form-item label="拓扑极性表面积(Å²)">
                                    <span>{{ props.row.topologicalPolarSurfaceArea }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="结构式"
                            width="200">
                        <template slot-scope="scope">
                            <el-image
                                    style="width: 170px; height: 170px"
                                    :src="getImgUrl1(scope.row.id)"
                                    @click="bigImg(getImgUrl1(scope.row.id))"
                                    :preview-src-list="srcList"
                                    :fit="fit"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="chineseName"
                            label="中文名"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            prop="englishName"
                            label="英文名"
                            width="180">
                    </el-table-column>
                    <!--                <el-table-column-->
                    <!--                        prop="diffName"-->
                    <!--                        label="别名"-->
                    <!--                        width="380">-->
                    <!--                </el-table-column>-->
                    <el-table-column
                            prop="formula"
                            width="180"
                            label="分子式">
                    </el-table-column>
                    <el-table-column
                            prop="canonicalSMILES"
                            width="280"
                            label="Canonical SMILES">
                    </el-table-column>
                    </el-table-column>
                </el-table>
                <div class="block" align="center" style="position:relative;top: -100px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            layout="prev, pager, next"
                            :total="totals"
                            v-show="show8"
                            :page-size="pageSize">
                    </el-pagination>
                </div>
            </template>

        </div>
    </div>

    <div class="footer">

    </div>

</div>

</body>

<script>
    new Vue({
        el: '#app',
        data :{
            id:"",
            word:"",
            language:"",
            currentPage:1,
            pageSize:5,
            totals:0,
            show1:false,
            show2:false,
            show3:false,
            show4:false,
            show5:false,
            show6:false,
            show7:false,
            show8:false,
            activeIndex: '1',
            activeIndex2: '1',
            logo:'img/logo1.png',
            fits:'scale-down',
            dialogTableVisible: false,
            dialogTableVisible1: false,
            dialogTableVisible2: false,
            srcList:["1"],
            formRule:{word:[{required:true,message:"请输入正确信息",trigger:'blur'}]},
            ticketInfoform:{
                composition:'',
                extractionMethod:'',
                document:''
            },
            ticketInfoform1:{
                drugPromotedCName:'',
                drugPromotedEName:'',
                massFraction:'',
                document:''
            },
            tableData: [],
            tableData1:[],
            fit:"contain",
            oilName:[],
        },
        methods: {
            findAll(){
                var _this = this;
                this.status="block";
                var regu="^[ ]+$";
                var re=new RegExp(regu);
                if (this.word==""||this.word==null||re.test(this.word)||(this.word=="油")){
                    this.$message({
                        message: '警告，请输入正确信息',
                        type: 'warning'
                    });
                }else {
                    console.log(((this.word.replace(/(^s*)|(s*$)/g, "").length==1) && (this.word.replace(/(^s*)|(s*$)/g, "").indexOf("油")!=-1)))
                    console.log((this.word.replace(/(^s*)|(s*$)/g, "").length))
                    console.log( (this.word.replace(/(^s*)|(s*$)/g, "").indexOf("油")!=-1))
                    axios.get("http://localhost:8080/user/search?id="+this.id+"&word="+this.word).then(res=>{
                        if(this.id==1){
                            _this.tableData=res.data.oils;
                            _this.tableData1=res.data.oilList;
                            _this.totals=res.data.oilList.length;
                            _this.show1=true;
                            _this.show2=true;
                            _this.show3=false;
                            _this.show4=false;
                            _this.show5=false;
                            _this.show6=false;
                            _this.show7=false;
                            _this.show8=false;
                            console.log(res.data.oils[2]);
                        }else if (this.id==2){
                            _this.tableData1=res.data.drugList;
                            _this.totals=res.data.drugList.length;
                            _this.show1=false;
                            _this.show2=false;
                            _this.show3=true;
                            _this.show4=true;
                            _this.show5=false;
                            _this.show6=false;
                            _this.show7=false;
                            _this.show8=false;
                            console.log(res.data.drugList[0])
                        }else if(this.id==3){

                            _this.tableData=res.data.compositions;
                            _this.totals=res.data.compositions.length;
                            _this.show1=false;
                            _this.show2=false;
                            _this.show3=false;
                            _this.show4=false;
                            _this.show5=true;
                            _this.show6=true;
                            _this.show7=false;
                            _this.show8=false;
                            console.log(res.data.compositions[0])
                        }else if(this.id==4){

                            _this.tableData=res.data.drugPromoteds;
                            _this.totals=res.data.drugPromoteds.length;
                            _this.show1=false;
                            _this.show2=false;
                            _this.show3=false;
                            _this.show4=false;
                            _this.show5=false;
                            _this.show6=false;
                            _this.show7=true;
                            _this.show8=true;
                            console.log(res.data.drugPromoteds[0])
                        }
                        else {

                            _this.tableData1=res.data.oils;
                            _this.totals=res.data.oils.length;
                            _this.show1=true;
                            _this.show2=true;
                            _this.show3=false;
                            _this.show4=false;
                            _this.show5=false;
                            _this.show6=false;
                            _this.show7=false;
                            _this.show8=false;
                            console.log(res.data.oils[0])
                        }

                    })
                }


            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            // 点击ID 查看数据明细
            viewInfo(row){
                this.dialogTableVisible = true;
                var _this = this;
                axios.get("http://localhost:8080/user/search?id=7"+"&word="+row).then(res=>{
                    _this.ticketInfoform=res.data.oils;
                })
            },
            viewInfo1(row){
                this.dialogTableVisible1 = true;
                var _this = this;
                axios.get("http://localhost:8080/user/search?id=8"+"&word="+row).then(res=>{
                    _this.ticketInfoform1=res.data.oils;
                })
            },
            viewInfo2(row){
                this.dialogTableVisible2 = true;
                var _this = this;
                axios.get("http://localhost:8080/user/search?id=9"+"&word="+row).then(res=>{
                    _this.oilName=res.data.oilName;
                })
            },
            //获取图片地址
            getImgUrl (img) {
                return "/img/composition/" + img+ ".jpg";
            },
            getImgUrl1 (img) {
                return "/img/drug/" + img+ ".jpg";
            },
            //大图
            bigImg(url) {
                this.srcList[0] = url;
            },
            findOil(name){
                open("/oil.html?name="+name+"&id=1");
            },  findOilApplication(name){
                open("/oil.html?name="+name+"&id=2");
            },
        }
    })

</script>

</html>

